<template>
  <section>
    <el-form label-width="100px">
      <el-form-item label="标题：">
        <el-input size="mini" v-model="currPeriod.title" style="width:50%"></el-input>
      </el-form-item>
      <el-form-item label="起止时间：">
        <el-date-picker size="mini" v-model="currPeriod.start" type="datetime"
                        placeholder="选择开始时间" default-time="12:00:00"
                        format="yyyy-MM-dd HH:mm:ss" value-format="timestamp"/>
        ~
        <el-date-picker size="mini" v-model="currPeriod.end" type="datetime"
                        placeholder="选择结束时间" default-time="12:00:00" value-format="timestamp"
                        format="yyyy-MM-dd HH:mm:ss"/>
      </el-form-item>
      <el-form-item label="讲师：">
        <el-input size="mini" v-model="currPeriod.lecturer" style="width:50%"></el-input>
      </el-form-item>
      <el-form-item label="教室：">
        <el-input size="mini" v-model="currPeriod.address" style="width:50%"></el-input>
      </el-form-item>
      <el-form-item label="课时描述：">
        <el-input size="mini" v-model="currPeriod.description" type="textarea" style="width:80%"/>
      </el-form-item>
      <el-form-item label="">
        <el-button size="mini" type="success" @click="confirmCurrCourseBtn(currPeriod)">{{currPeriod.id?'保存':'新建'}}</el-button>
      </el-form-item>
    </el-form>
  </section>
</template>

<script>
  import dateFormater from '@/common/date-formater'
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import errHandler from '@/assets/errHandler.js'
  import Vue from 'vue'//后续添加属性，需要vue联动
  export default {
    name: "newPeriod",
    props:['currPeriod'],
    data() {
      return {
        lecturerList:null,
      }
    },
    created(){
      console.log(this.currPeriod)
      this.getLecturerList()
    },
    computed: {
      ...mapGetters(['department']),
    },
    watch:{},
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      getLecturerList(){
        this.fetch({name:"getLecturerList"})
          .then(res=>{
            console.log(res)
            this.lecturerList=res
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      confirmCurrCourseBtn(period){
        // console.log(period)
        period.start=dateFormater.formatDatetime(period.start)
        period.end=dateFormater.formatDatetime(period.end)
        if(period.id){
          //更新
          this.updatePeriod(period)
          // this.$emit('updatePeriod',period)
        }else {
          console.log('到这了么？？？')
          // this.$emit('createPeriod',period)
          this.createPeriod(period)
        }
      },
      updatePeriod(data){
        this.fetch({name:"updatePeriod",data})
          .then(res=>{
            console.log(res)
            this.$message({type:'success',message:'更新成功'})
            this.$emit('cancel',{type:'update',cp:res})
            // this.periodList=res.periods
            // this.editPeriodDialog=false
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      createPeriod(data){
        this.fetch({name:"createPeriod",data})
          .then(res=>{
            console.log(res)
            this.$message({type:'success',message:'创建成功'})
            this.$emit('cancel',{type:'add',cp:res})
            // this.periodList=res.periods
            // this.editPeriodDialog=false
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
    }
  }
</script>

<style scoped>

</style>
